
<template>
  <div class="pdf-container">
    <VuePdfApp 
      :pdf="pdfUrl"
      :config="config"
      :style="viewerStyle"
      @pages-rendered="onPagesRendered"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import VuePdfApp from 'vue3-pdf-app'
import 'vue3-pdf-app/dist/icons/main.css'

const pdfUrl = ref(`http://127.0.0.1:8080/g12345.pdf`)
const viewerStyle = ref({
  width: '100%',
  height: '100vh'
})

const config = ref({
  sidebar: {
    viewThumbnail: false,
    viewOutline: false
  },
  secondaryToolbar: {
    secondaryDownload: false,
    secondaryPrint: false,
    secondaryZoom: false
  },
  toolbar: {
    viewFind: false,
    viewThumbnail: false,
    viewOutline: false
  }
})

const onPagesRendered = () => {
  const toolbars = document.querySelectorAll('.toolbar, .secondary-toolbar')
  toolbars.forEach(el => el.remove())
}
</script>

<style scoped>
.pdf-container {
  background-color: #f5f5f5;
  height: 100vh;
  overflow: auto;
  padding: 20px;
}

::v-deep canvas {
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
</style>
